<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
import { Expand } from '@element-plus/icons-vue'
import { getPortListByCountry } from './astar.js'
import { mapObj } from '../mapInfoObj/initMap'
import Base from './Base.vue'
import Hcgh from './Hcgh.vue'
import Hxtq from './Hxtq.vue'
import Cbsb from './Cbsb.vue'
import Config from "../../components/mapInfoObj/mapConfig.js"

onMounted(() => {
    // handleGetPortListByCountry()
})

const isList = ref(true)
const tools = ['概况', '航程规划', '船舶识别']
const current = ref('航程规划')
const sty = ref({
    color: 'rgb(0, 0, 0)',
    borderBottom: '2px solid rgb(0, 0, 0)'
})

const colors=["#5470c6","#91cc75","#fac858","#ee6666","#73c0de","#3ba272","#fc8452","#9a60b4"]
const countryList = ["美国", "加拿大", "瑞典", "日本", "芬兰", "克罗地亚", "挪威", "丹麦"]
const portList = ref([])
const portLayerList = ref([])
const handleGetPortListByCountry = () => {
    var pointCollection = L.featureGroup();
    getPortListByCountry('美国').then(res => {
        portList.value = res.data.data.map(item => {
            if (Number(item.lon) < 0) {
                item.lon = Number(item.lon) + 360
            }
            return item
        })
        console.log(portList.value);
        portList.value.forEach(item => {
            let color = colors[countryList.indexOf(item.country_cn)]
            let portLayer = L.circleMarker([item.lat, item.lon], {
                // 绿色点
                // color: '#7ed321',
                // fillColor: '#7ed321',
                color: color,
                fillColor: color,
                fillOpacity: 1,
                radius: 3
            })
                .bindPopup(
                    `
                    <div class="pop_div"><p class="pop_title">ID：</p><p>${item.port_id}</p></div>
                    <div class="pop_div"><p class="pop_title">国家：</p><p>${item.country}</p></div>
                <div class="pop_div"><p class="pop_title">中文名称：</p><p>${item.port_cn}</p></div>
                <div class="pop_div"><p class="pop_title">英文名称：</p><p>${item.port_name.split('(')[0]}</p></div>
                <div class="pop_div"><p class="pop_title">经纬度：</p><p>${item.lon}, ${item.lat}</p></div>
                `, {
                    className: 'popup',
                    closeButton: false
                }
                )
            // .addTo(mapObj.map)
            portLayerList.value.push(portLayer)
            // 不显示portLayerList
            // 添加到图层组
            pointCollection.addLayer(portLayer);
        })
        // 添加到地图
        mapObj.controlLayers.addOverlay(pointCollection, '港口')
        mapObj.map.addLayer(pointCollection);
    })
}

</script>

<template>
    <div class="astar">
        <div class="astar_img" v-if="!isList">
            <img src="../../assets/img/zhankai.png" alt="" style="height: 80%;" @click="isList = true">
        </div>
        <div class="card_hook astar_main" v-if="isList">
            <div id="header">
                <img src="../../assets//img/close.png" alt="" @click="isList = false" style="height: 50%;">

                <span v-for="(item, index) in tools" :key="index" @click="current = item"
                    :style="current == item ? sty : ''">{{ item }}</span>
            </div>
            <div id="main">
                <Hcgh v-if="current == '航程规划'" />
                <Base :portList="portList" :portLayerList="portLayerList" v-else-if="current == '概况'" />
                <Cbsb v-else />
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
.astar {
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 599;
    box-sizing: border-box;
    // height: calc(100% - 20px);
    // background-color: antiquewhite;


    .astar_img {
        height: 30px;
        width: 30px;
        background-color: rgb(255, 255, 255);
        border-radius: 7px;
        cursor: pointer;

        img {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        &:active {
            transform: scale(0.9);
        }
    }

    .astar_main {
        width: 450px;
        // height: calc(100% - 120px);
        height: calc(100vh - 100px);
        padding: 15px;
        display: flex;
        flex-direction: column;

        #header {
            height: 40px;
            display: flex;

            span {
                margin-left: 15px;
                cursor: pointer;
                font-size: 16px;
                font-family: '钉钉进步体';
                color: rgb(153, 153, 153);
                transition: color 0.3s;
            }

            img {
                cursor: pointer;
            }

            border-bottom: 1px solid rgb(221, 221, 221);
        }

        #main {
            // height: calc(100vh - 170px);
            flex: 1;
            background-color: rgb(255, 255, 255);
            overflow: auto;

            .hcgh {
                #tools {
                    display: flex;
                    justify-content: space-around;
                    margin-top: 20px;

                    .el-button {
                        flex: 1;
                    }
                }
            }

            // 隐藏滚动条
            &::-webkit-scrollbar {
                display: none;

                &-track {
                    background-color: #fff;
                }

                &-thumb {
                    background-color: #fff;
                }

                &-corner {
                    background-color: #fff;
                }

                &-vertical {
                    width: 0px;
                }

                &-horizontal {
                    height: 0px;
                }

                &-button {
                    background-color: #fff;
                }

                &-decrement {
                    background-color: #fff;
                }

            }
        }
    }
}
</style>